iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
1
自我挑戰組

UI / UX 設計白皮書 - Material Design 導讀系列 第 29

UI / UX 設計白皮書 / Material Design 導讀_Day29 Platform guidance 平台指導

  • 分享至 

  • xImage
  •  

昨天我們了解到 Platform guidance 平台指導,在應用程式中許多的操作需要權限許可,透過入門指南說明權限、或是事先詢問、在消息通知中顯示請求、透過情境教育說明向用戶請求,可以向用戶說明每種權限的需求用途,用戶可以選擇同意或是拒絕權限請求,用戶拒絕權限時可能會導致某些操作無法執行,都應向用戶說明可能會發生的情況並且提供設定讓用戶允許權限。

應用程式在主選單項目內提供用戶調整 "設定" ,在設定中優先顯示最重要或最常用的設定,可以將相關的設定群組化,設定可以多元化的顯示為單選、多選、拉霸、開關、日期時間、列表畫面、主開關、相依性設定等等,也可以設定在鎖定螢幕上顯示的內容,使用簡短易懂的文字傳達設定說明,提供用戶快速查看或是修改設定項目。

畫面中的片段可以根據內容區塊確定要顯示的片段類型,提供用戶導覽、任務連結、功能及內容,不要再同一個片段中表達多種目的,片段可以根據用法和顯示方式以不同大小顯示,表現出介面中各種應用的局部片段,拿捏好片段展現的方式,可以更快速提供用戶部分訊息。

今天我們進入到 Material Design 中 Platform guidance 平台指導的第四天,今天會了解了解關於 Android 分屏、Android 滑動刷新和 Android 文字選擇工具欄這三個部分,讓我們繼續看下去吧。


Platform guidance 平台指導

Android bars / Android 狀態欄
Android fingerprint / Android 指紋
Android haptics / Android 觸覺
Android iconss / Android 圖示
Android navigating between apps / Android 在介面之間導覽
Android notifications / Android 通知
Android permissions / Android 權限
Android settings / Android 設定
Android slices / Android 片段
Android split-screen / Android 子母畫面
Android swipe-to-refresh / Android 滑動刷新
Android text selection / Android 文字選擇工具欄
Android widget / Android 小工具
Cross-platform adaptation 跨平台適應

※ 請注意以下指南僅適用於 Android ※

Android split-screen / Android 子母畫面

子母畫面模式可讓兩個活動同時顯示在螢幕上,當應用程式開啟新活動時,子母畫面預設在同一個螢幕上顯示兩個活動,調整應用程式大小來符合子母畫面(除非應用程式與子母畫面不相容)。子母畫面顯示在手機上以垂直顯示(上下放置顯示),在平板及電腦上以水平顯示(左右側顯示)

滿足以下條件啟動子母畫面模式,應用程式會在螢幕的另一個部分啟動新活動:

  • 原始活動和新活動彼此關聯,並且可以使用子母畫面模式
  • 將原本顯示為全螢幕的應用程式顯示在子母畫面中,在另一個畫面開啟新活動畫面。
  • 應用程式顯示提示 " 將進入子母畫面模式 ",例如:說明 " 在新畫面中打開 " 的按鈕

本圖片截取自 Material Design。

子母畫面模式將保持畫面分割,直到用戶取消或切換到不相容的應用程式為止。用戶可以通過拖動畫面分隔線在子母畫面模式下調整畫面大小。

邊緣滑動手勢:當子母畫面模式處於啟動狀態時,邊緣滑動手勢可能無法按照預期執行操作,因為子母畫面模式依賴於滑動來調整畫面大小,如果您的應用程式還是使用邊緣滑動來執行操作,則滑動可能會觸發螢幕大小調整或應用中的操作。

為避免這種情況,邊緣滑動並不是應用程式中執行操作的唯一方法。應該準備替代方法來執行每個動作。例如:導覽選單使用邊緣滑動可以打開側滑選單項目,也可以透過點擊選單圖示來開啟它。

為了支持子母畫面顯示,將介面中可見內容縮放到適當的大小和密集度。主要操控元件應適合於子母畫面使用。例如:導覽選單可以收合至側邊選單中。

處於子母畫面的應用程式在整個裝置尺寸和方向根據響應式調整。螢幕在縱向顯示沿 x 軸分割,在橫向顯示沿 y 軸分割,更改裝置的顯示方向不應導致介面更改顯示方式。例如:如果裝置從縱向旋轉為橫向,在子母畫面的一側顯示的影片不應切換為全螢幕顯示。

應用程式針對手持裝置和平板裝置使用相同或不相同的排版:

  • 調整應用程式畫面大小後,具有手機和平板排版的應用程式可能會在用戶拖動畫面時,在手機和平板的用戶界面排版之間進行切換,而切換排版不會造成轉場影響。
  • 在手機和平板的排版完全不同的應用程式應避免在平板上以子母畫面模式顯示手機界面。而是將現有的平板用戶界面調整為較小的尺寸,確保用戶在兩種設備上均有一致的體驗。

為了簡化應用程式來適應各種尺寸的子母畫面模式,建議先從最小尺寸開始設計。透過壓縮元件或刪除不必要的元素,創造一個寬度或高度為 220dp 的排版。排版可以從最小尺寸縮放至大尺寸畫面。

在平板上開啟子母畫面時,預設情況下將佔整個螢幕的 34.15%
當子母畫面在手持裝置上處於使用狀態時,垂直方向應用程式的縱橫比為 16:9

Android swipe-to-refresh / Android 滑動刷新

滑動手勢 可以刷新列表、格線列表和區塊集合的畫面,刷新後在畫面顯示最新內容。將滑動手勢與動態內容區塊結合使用,動態內容會頻繁的更新畫面,使用滑動手勢更新後即可查看區塊內容是否有更新。

本圖片截取自 Material Design。

刷新指示符號會與刷新手勢或動作一起出現,在畫面同步後隱藏刷新指示符號。

使用滑動手勢刷新畫面中的內容,動態區塊會載入最新的內容,若畫面中的動態區塊沒有更新則會保持在相同的畫面。在刷新畫面時可以不依照順序刪除、重新排列、修改或插入項目,也可以只改變沒有顯示在畫面中的區塊。

在下列狀況下,請勿使用滑動刷新功能或顯示刷新指示符號:

  • 導覽列項目
  • 螢幕上的小區塊動態
  • 可顯示內容

隨著畫面更新的同時加入刷新指示符號到畫面中,指示符號上帶有圓弧線段和邊框,在圓弧線段旋轉時逐漸淡入更新的畫面。刷新指示符號直到畫面刷新完成並且顯示更新內容後消失,或是用戶離開刷新的內容為止。

刷新指示符號轉場效果:當某個區塊有內容更新時,新的內容區塊會在現有區塊後方載入刷新內容,載入完成之後,前方區塊透過轉場特效顯示出更新後的內容。在下列情況下轉場時,刷新指示符號的大小會增加:

  • 在畫面上淺色元件放置於所有區塊頂端時
  • 在應用列或下拉式選單操作時刷新內容

為了避免手勢判斷錯誤,確保用戶可以使用滑動手勢來刷新畫面,用戶執行滑動手勢後刷新指示符號必須通過門檻才能刷新畫面。此門檻由多種表現提示:

  • 圓形旋轉器完成傳入轉場並達到 100% 不透明度
  • 圓形背景的旋轉速度變慢
  • 刷新指示符號的轉換速度變慢

超過門檻後,繼續完成滑動手勢即可啟動刷新畫面。反向操作手勢超過門檻將取消刷新動作。

滑動手勢可刷新畫面區塊,刷新手勢在內容區塊的頂端可以使用,但也可以在區塊的底部。不論裝置方向是垂直或水平顯示,刷新指示符號應顯示在畫面內容的頂端附近置中擺放。在局部更新的區塊上,可以些微調整刷新指示符號位置擺放於區塊頂端置中。例如:指示符號可以放置區塊邊緣或格線排版上,只要指示符號位於刷新內容的頂端附近即可。

Android text selection / Android 文字選擇工具欄

工具欄顯示在被選擇的文字區間之上,顯示 " 剪下 "、" 複製 "、" 貼上 "、" 更多 " 的操作選項。

本圖片截取自 Material Design。

工具欄在選擇一段文字時出現,在工具欄區域操作結束或點擊所選區域之外時消失。當用戶選擇 " 更多 " 的圖示時,工具欄將轉換為輔助選單顯示其他操作選項。


今天我們了解到 Platform guidance 平台指導,子母畫面模式可讓兩個活動同時顯示在螢幕上,執行兩種不同的應用程式活動,也可以調整子母畫面的畫面尺寸,但要注意邊緣滑動手勢可能要提供另一種方式開啟側拉式選單,在子母畫面時能要保持響應式排版,讓畫面顯示更具有一致性。透過滑動手勢可以即時更新畫面動態區塊及排版,提供用戶快速的掌握最新的資訊及訊息。在文字被反白選擇時顯示工具欄提供更多操作選項。

明天讓我們繼續完成 Platform guidance 平台指導 的章節,每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

如果您喜歡這篇文章或是這篇文章有幫助到您,歡迎按讚鼓勵,我們明天見囉~


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day28 Platform guidance 平台指導
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day30 Platform guidance 平台指導
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言